import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import {
  RecommedWrapper,
  RecommedItem
} from '../style'

class Recommed extends PureComponent {
  render() {
    const { list } = this.props
    return (
      <RecommedWrapper>
        {
          list.map((item) => {
            return (
              <RecommedItem key={item.get('id')} imgUrl={item.get('imgUrl')}></RecommedItem>
            )
          })
        }
      </RecommedWrapper>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(['home', 'recommendList'])
})

export default connect(mapState, null)(Recommed)